<!--
 * @Author: your name
 * @Date: 2020-12-04 17:06:46
 * @LastEditTime: 2020-12-21 19:16:05
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\installationGuide\index.vue
-->
<template>
    <div class="installationGuide-index-main-box">
        <BaseHeader></BaseHeader>
        <div class="content-box">
            <h4>SN:<span class="sn-msg-text">{{this.$route.query.sn || ''}}</span></h4>
			<p style='color:red;margin-top:10px;line-height:18px;font-weight: 700;'>{{$t('installationGuide.index.p')}}</p>
			<div class='button-box-new' @click='()=>{$router.push({path:"/warranty",query:{sn:$route.query.sn}})}'>{{$t('invoice.warrantyDetails')}}</div>
			<div class='button-box-new' @click='()=>{$router.push({path:"/installationGuide/installation",query:{sn:$route.query.sn}})}'>{{$t('installationGuide.title')}}</div>
			<div class='button-box-new' @click='()=>{$router.push({path:"/installationGuide/explain",query:{sn:$route.query.sn}})}'>{{$t('device-installation-guide')}}</div>
			<p class='telphoto'>{{$t('contact-us')}}:<span>service@solaxpower.com</span></p>
        </div>
    </div>
</template>

<script>
import BaseHeader from '../../components/baseHeader'
export default {
    components: {
        BaseHeader
    },
    props: {

    },
    data() {
        return {

        };
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {

    },
    methods: {

    },
};
</script>

<style  lang="less" scoped>
.installationGuide-index-main-box{
    height: 100%;
    .content-box{
        padding:20px;
        position: relative;
        background: url('../../assets/img/warranty_bg.png') no-repeat;
        background-position: 100% 0%;
        // width: 89%;
        height: calc(100% - 110px);
    }
    h4{
        text-align: center;
    }
    .button-box-new{
        width: 60%;
        background-color: #FF7F27;
        color: #fff;
        padding: 10px 0px;
        font-size: 24px;
        border-radius: 18px;
        margin: 50px auto;
        text-align: center;
        font-weight: 900;
    }
    .telphoto{
        text-align:center;
        color: #666;
        font-size: 16px;
    }
}
</style>
